<template>
<!-- 顶部组件 -->
 <van-nav-bar  left-text="返回" left-arrow @click-left="$router.go(-1)">
  <template #title>
   购物车({{cartnum}})
  </template>
</van-nav-bar>
<!-- 购物车为空时展示的内容 -->
<div class="empty" v-if="isshow">
<van-empty description="购物车无内容" />
<van-button round type="danger" @click="gohome">立即购物</van-button>
</div>
<!-- 购物车商品展示 -->
<div v-for="item in cartlist" :key="item.cartid">
 <van-swipe-cell >
   <!-- 复选框  -->
  <van-checkbox v-model="item.flag" class='eachBox' @click="danxuan(item.flag,item.cartid)"/>
 <!-- 商品卡片 -->
  <van-card
    :price="item.originprice"
    :desc="item.proname"
    class="goods-card"
    :thumb="item.img1"
  >
  <!-- 步进器 -->
  <template #footer>
   <van-stepper v-model="item.num" theme="round" button-size="22" disable-input  @change='changenum(item.num, item.cartid)'/>
   </template>
  </van-card>
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button" @click="del(item.cartid)"/>
  </template>
</van-swipe-cell>
</div>
<!-- 推荐列表展示 -->
<p class="title">可能你还想要</p>
<div class="body">
  <van-cell v-for="item in remandlist" :key="item.proid" @click="gotodetail(item.proid)">
        <img :src="item.img1" alt="">
        <p>{{item.proname}}</p>
        <p class="price">￥{{item.originprice}}</p>
        </van-cell>
</div>
<!-- 底部提交订单 -->
<van-submit-bar :price="totalprice" button-text="提交订单">
  <van-checkbox v-model="checkall" @click="quanxuan">全选</van-checkbox>
</van-submit-bar>
</template>



<script setup lang="ts">
import{ref,reactive,computed,watch,defineProps,defineEmits, watchEffect, onMounted} from 'vue'
import {watchcart,getlist,checkallfn,checkfn,cartnumfn,delcart} from '../api/cart'
import {useRouter,useRoute}from 'vue-router'
let router = useRouter()
let route=useRoute()
// 获取购物车商品种类数量
const cartnum=ref("")
// 购物车数据
const cartlist=ref([])
// 推荐列表数据
const remandlist=ref([])
// 全选按钮的状态
const checkall=ref(false)
// 底部选中商品总价
const totalprice=ref(0)
// 判断是否显示空状态
const isshow =ref(cartnum.value=="0"?true:false)
// 定义查看购物车列表方法
const kancartfn=()=>{
watchcart({userid:localStorage.getItem("userid") as string}).then((res:any)=>{
    console.log(res);
    // 头部显示购物车数量
    cartnum.value =res.data.length
    // 获取购物车数据
    cartlist.value=res.data
    // 每次调用时使总价先清0
    totalprice.value=0
    // 通过判断购物车数据中每一个选中状态是否为true来判断全选按钮
    checkall.value=res.data.every((item:any)=>{return item.flag==true})
    // 遍历购物车数据将选中状态为true的数据进行相加
     res.data.forEach((item: any) => {
        if (item.flag) {
          totalprice.value += (item.originprice * item.num * 100)
        }
})})
}
kancartfn()

// 获取推荐列表数据
interface aa{
 count:number,
 limitNum:number
}
const data:aa={
  count:1,
  limitNum:12
}
getlist(data).then((res:any)=>{
  console.log(res);
  remandlist.value=res.data
})

// 点击立即购物按钮跳转首页
const gohome=()=>{
   router.push("/home")
}

// 点击推荐商品跳转到详情页
const gotodetail=(id: string)=>{
      router.push({ path: '/detail', query: { id: id } })
}

// 点击单选按钮
const danxuan=(flag:boolean,cartid:string)=>{
     console.log(123);
    checkfn({flag,cartid}).then((res:any)=>{
      console.log(res);
      if(res.code==200){
        kancartfn()
      }
    })
}

// 点击全选按钮
const quanxuan =()=>{
  interface cc{
  userid:string,
  type:boolean
}
const quanxuandata:cc={
 userid:localStorage.getItem("userid") as string,
 type:checkall.value
}
  checkallfn(quanxuandata).then((res:any)=>{
      if(res.code==200){
        kancartfn()
      }
 })
}
// 改变商品数量
const changenum =(num:number,cartid:string,)=>{
     console.log(num);
      cartnumfn({cartid,num}).then((res:any)=>{
        if(res.code==200){
           kancartfn()
        }
      })
}
// 删除购物车
const del=(cartid:string)=>{
    delcart({cartid}).then((res:any)=>{
      if(res.code==200){
        kancartfn()
      }
    })
}

</script>





<style scoped lang="scss">
.van-button{
  margin-left:39%
}
.title{
  text-align: center;
  font-size: 13px;
  color: gray;
  margin-top: 40px;
}
.body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .van-cell {
        width: 50%;
        img {
            width: 100%;
            height: 60%;
        }
        p {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .price {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    }
}
 .delete-button {
    height: 100%;
  }
.eachBox{
   position: absolute;
        z-index: 99;
        margin: 40px 0px 50px 8px;
}
.van-card{
  margin-left: 30px;
}
</style>s